// 用户模块
import { userAccountLogin } from '@/api/user'

const user = {
  namespaced: true,

  // 组件的data选项为什么必须是一个函数?
  // 原因: 组件本质为了复用, 复用组件的时候, 要保证组件内部的数据互相独立的不影响的,
  //      为了保证数据独立, 必须是一个函数, 这样每次复用组件都会调用函数, 每次调用函
  //      数都会生成一份独一无二的内存空间, 这样, 各个复用组件的数据就会相互独立了

  // js底层机制: 函数每次调用return出来的对象会生成一块全新的内存, 虽然初始值看起来一样, 但是互相不影响

  // 定义数据
  //   state: () => ({}) ?
  //   state: {}

  //   state: 为什么要写成函数? 组件复用的时候数据互相不影响
  //   state: 为什么写成对象? 项目不够大, 不需要复用, 定义普通对象没有问题
  //   为什么是 state: () => ({})? 当函数中只有一个返回值的时候, 可以省略return, 加括号的目的, 仅仅是为了包裹一下, 编程表达式, 就没有语法错误了
  //   相当于: state: () => { return {} }
  //   state: () => {
  //     return {
  //       profile: {
  //         name: 'gd',
  //         id: 9426
  //       }
  //     }
  //   },

  // 总结: 写函数return对象的应用 bue data / state / props: 默认参数(复杂类型 -> 必须是一个工厂函数)
  //        上面3种都是为了保证复用的时候数据互相独立, 不影响, 底层js机制都是一样的
  state: () => ({
    profile: {
      id: '',
      account: '',
      nickname: '',
      avatar: '',
      token: '',
      mobile: ''
    }
  }),
  // 定义修改数据数据方法
  mutations: {
    setProFile (state, userInfo) {
      state.profile = userInfo
    },

    // 清除数据
    clearProfile (state) {
      state.profile = {}
    }
  },
  // 定义异步方法
  actions: {
    async doLogin (ctx, { account, password }) {
      // 发送登录请求
      const { result } = await userAccountLogin({ account, password })
      // 调用mutations, 传入数据
      ctx.commit('setProFile', result)
    }
  },
  // 基于state的计算属性
  getters: {}
}

export default user
